<template>
    <!-- 时间线的归档 -->
    <div class="container">
        <div
            v-for="(menu, index) in menuList"
            :key="index"
            class="menu-container"
        >
            <h3 class="menu-item-container">
                <div class="menu-name">
                    <a @click="getMenuArticle(menu.id)">{{ menu.name }}</a>
                    <span>/</span>
                    <a @click="getMenuArticle(menu.childId)">
                        {{ menu.childName }}
                    </a>
                </div>
            </h3>
            <ul>
                <li
                    v-for="article in menu.list"
                    :key="article.id"
                    class="article-container"
                    @click="goArticle(article)"
                >
                    <div class="date">{{ formatDate(article.createTime) }}</div>
                    <div class="title">{{ article.articleTitle }}</div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    name: "article-archive",
    props: {
        menuList: {
            type: Array,
            required: true,
        },
    },
    computed: {},
    data() {
        return {};
    },
    methods: {
        /**
         * 获取指定菜单下的文章
         * @param  id 菜单id
         */
        getMenuArticle(id) {
            // 触发自定义事件，并传递数据给父组件
            this.$emit("childEvent", id);
        },
        formatDate(dateString) {
            const options = {
                year: "numeric",
                month: "long",
                day: "numeric",
            };
            return new Date(dateString).toLocaleDateString("zh-CS", options);
        },
        goArticle(item) {
            // 视频
            if (item.contentType === 1) {
                this.$router.push({
                    name: "video-item",
                    params: { id: item.id },
                });
            } else if (item.contentType === 2) {
                // 题目
                this.$router.push({
                    name: "question",
                    params: { id: item.id },
                });
            } else {
                // 文章详情
                this.$router.push({
                    name: "article-item",
                    params: { id: item.id },
                });
            }
        },
    },
};
</script>

<style lang="scss" scoped>
@use "../assets/css/article-archive.scss";
</style>
